<template>
	<view class="dil-select" :class="border ? '' : 'dil-select__no-border'">
		<view v-if="label" class="dil-select__label" :style="labelStyle">
			<text>{{ label }}</text>
		</view>
		<view class="dil-select__input-box">
			<view class="" style="display: flex; flex-wrap: wrap; width: 100%" v-if="multiple && currentSelectLabels.length > 0">
				<view v-for="(item, index) in currentSelectLabels" :key="item + index">
					<text>{{ item }}</text>
					<uni-icons type="clear" color="#999" @click="clearInput(index)" v-if="multiple && !disabled" style="margin: 15rpx"></uni-icons>
				</view>
				<input
					ref="inputRef"
					class="dil-select__input"
					type="text"
					:disabled="disabled"
					:placeholder="placeholder"
					placeholder-class="dil-select__input-plac"
					:focus="isFocus"
					v-model="inputVal"
					@input="onInput"
					@focus="onFocus"
					@blur="onBlur"
				/>
			</view>
			<view class="" v-else>
				<input
					ref="inputRef"
					class="dil-select__input"
					type="text"
					:placeholder="placeholder"
					placeholder-class="dil-select__input-plac"
					:disabled="disabled"
					:focus="isFocus"
					v-model="inputVal"
					@input="onInput"
					@focus="onFocus"
					@blur="onBlur"
				/>
			</view>
			<uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector" style="right: 0; position: absolute" v-if="!disabled"></uni-icons>
		</view>
		<view class="dil-select__selector" v-if="showSelector" tabIndex="0" style="outline: none" @focus="selectorFocus" @blur="selectorBlur">
			<view class="uni-popper__arrow"></view>
			<scroll-view scroll-y="true" class="dil-select__selector-scroll">
				<view class="dil-select__selector-empty" v-if="filterOptionsLength === 0">
					<text>{{ emptyTips }}</text>
				</view>
				<view class="dil-select__selector-item" v-for="(item, index) in filterOptions" :key="item.value" @click="onSelectorClick(item)">
					<text>{{ item.label }}</text>

					<text v-if="rightSlot" style="color: #8492a6">{{ item[rightSlot] }}</text>
					<uni-icons v-if="multiple && currentSelectValues.includes(item['value'])" type="checkmarkempty" color="#007aff" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'dilSelect',
	model: {
		event: 'selectClick',
		prop: 'value'
	},
	props: {
		//入参是options
		options: {
			default() {
				return [];
			},
			type: Array
		},
		multiple: {
			type: Boolean,
			default: false
		},
		border: {
			type: Boolean,
			default: true
		},
		label: {
			type: String,
			default: ''
		},
		labelWidth: {
			type: String,
			default: 'auto'
		},
		placeholder: {
			type: String,
			default: ''
		},
		emptyTips: {
			type: String,
			default: '抱歉，无匹配项'
		},
		clearable: {
			type: Boolean,
			default: true
		},
		disabled: {
			type: Boolean,
			default: false
		},
		value: {
			type: [String, Number, Array],
			default: ''
		},
		selectItem: {
			type: Object,
			default: () => {}
		},
		rightSlot: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			showSelector: false,
			inputVal: '',
			currentSelectValues: [],
			currentSelectLabels: [],
			isFocus: false,
			inputFocusVal: false,
			selectorFocusVal: false
		};
	},
	mounted() {
		let value = this.value || this.modelValue;
		if (!this.multiple) {
			this.inputVal = this.options.reduce((prev, item) => {
				if (item.value == value) {
					prev = item.label;
				}
				return prev;
			}, '');
		} else {
			if (value) {
				this.currentSelectValues = value;
				this.currentSelectLabels = [];
				value.forEach((item) => {
					this.options.forEach((e) => {
						if (item == e.value) {
							this.currentSelectLabels.push(e.text);
						}
					});
				});
			} else {
				this.currentSelectValues = [];
				this.currentSelectLabels = [];
				this.$emit('selectClick', []);
			}
		}
	},

	computed: {
		labelStyle() {
			if (this.labelWidth === 'auto') {
				return '';
			}
			return `width: ${this.labelWidth}`;
		},
		//过滤数组
		filterOptions() {
			return this.options.filter((item) => {
				if (this.inputVal && item.label) {
					return item.label.toString().indexOf(this.inputVal) > -1;
				} else {
					return item;
				}
			});
		},
		//计算数组长度
		filterOptionsLength() {
			if (this.filterOptions) {
				return this.filterOptions.length;
			} else {
				return 0;
			}
		}
	},
	watch: {
		selectorFocusVal(newValue, oldValue) {
			if (!newValue && !this.inputFocusVal) {
				this.showSelector = false;
			}
		},
		value(val) {
			console.log(val, 'val');
			let value = val;
			if (!this.multiple) {
				if (value) {
					this.inputVal = this.options.reduce((prev, item) => {
						if (item.value == value) {
							prev = item.label;
						}
						return prev;
					}, '');
				}
			} else {
				if (value.length > 0) {
					this.currentSelectValues = value;
					this.currentSelectLabels = [];
					value.forEach((item) => {
						this.options.forEach((e) => {
							if (item == e.value) {
								this.currentSelectLabels.push(e.label);
							}
						});
					});
				} else {
					this.currentSelectLabels = [];
					this.currentSelectValues = [];
				}
			}
			//手动触发选择事件
			let selection = this.filterOptions.find((item) => {
				return item.value == this.value;
			});
			if (selection && !this.showSelector) {
				this.onSelectorClick(selection);
			}
		},
		options(val) {
			let value = this.value;
			if (!this.multiple) {
				if (value) {
					this.inputVal = val.reduce((prev, item) => {
						if (item.value == value) {
							prev = item.label;
						}
						return prev;
					}, '');
				} else {
					if (this.inputVal) {
						setTimeout(() => {
							this.showSelector = true;
						}, 500);
					}
				}
			} else {
				if (value && value.length > 0) {
					this.currentSelectValues = value;
					this.currentSelectLabels = [];
					value.forEach((item) => {
						this.options.forEach((e) => {
							if (item == e.value) {
								this.currentSelectLabels.push(e.label);
							}
						});
					});
				} else {
					this.currentSelectOptions = [];
					this.currentSelectValues = [];
				}
			}
			//手动触发选择事件
			let selection = this.filterOptions.find((item) => {
				return item.value == this.value;
			});
			if (selection && !this.showSelector) {
				this.onSelectorClick(selection);
			}
		}
	},
	methods: {
		clearInput(index) {
			if (this.multiple) {
				this.currentSelectLabels.splice(index, 1);
				this.currentSelectValues.splice(index, 1);
				this.$emit('selectClick', this.currentSelectValues);
				// this.inputVal = '';
			} else {
				this.inputVal = '';
			}
		},
		toggleSelector() {
			this.showSelector = !this.showSelector;
		},
		onFocus() {
			this.$emit('onfucs');
			this.$emit('uniteRequest', this.inputVal);
			this.showSelector = true;
		},
		onBlur() {
			let that = this;
			that.inputFocusVal = false;
			if (!that.multiple) {
				that.$emit('blur', that.inputVal);
				setTimeout(() => {
					that.showSelector = false;
				}, 200);
			} else {
				setTimeout(() => {
					that.$emit('blur', that.currentSelectLabels.join(','));
				}, 200);
			}
		},
		selectorFocus() {
			this.selectorFocusVal = true;
		},
		selectorBlur() {
			this.selectorFocusVal = false;
		},
		onSelectorClick(item) {
			let map = JSON.parse(JSON.stringify(item));
			let currentVal = map['value'];
			let currentLabel = map['label'];
			if (!this.multiple) {
				this.$emit('selectClick', currentVal);
				this.$emit('autoChange', JSON.parse(JSON.stringify(map)));
				this.inputVal = currentLabel;
				setTimeout(() => {
					this.showSelector = false;
				}, 200);
			} else {
				console.log(this.currentSelectValues, 'this.currentSelectValues');
				let currrentValIndex = this.currentSelectValues.indexOf(currentVal);
				console.log(currrentValIndex, 'currrentValIndex');
				if (currrentValIndex === -1) {
					this.currentSelectValues.push(currentVal);
					this.currentSelectLabels.push(currentLabel);
				} else {
					this.currentSelectValues.splice(currrentValIndex, 1);
					this.currentSelectLabels.splice(currrentValIndex, 1);
				}
				this.inputVal = '';
				this.$emit('selectClick', this.currentSelectValues);
			}
		},
		onInput(val) {
			console.log(val, '=>111');
			let that = this;
			setTimeout(() => {
				that.$emit('uniteRequest', val.detail.value);
				// that.$emit('input', that.inputVal);
			}, 200);
			if (!this.multiple) {
				that.$emit('selectClick', '');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.dil-select {
	font-size: 14px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	padding: 6px 10px;
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	// height: 40px;
	flex-direction: row;
	align-items: center;
	// border-bottom: solid 1px #DDDDDD;
}

.dil-select__label {
	font-size: 16px;
	line-height: 22px;
	padding-right: 10px;
	color: #999999;
}

.dil-select__input-box {
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	align-items: center;
}

.dil-select__input {
	flex: 1;
	font-size: 14px;
	height: 22px;
	line-height: 22px;
}

.dil-select__input-plac {
	font-size: 14px;
	color: #999;
}

.dil-select__selector {
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #ebeef5;
	border-radius: 6px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	z-index: 2;
	padding: 4px 0;
}

.dil-select__selector-scroll {
	/* #ifndef APP-NVUE */
	max-height: 200px;
	box-sizing: border-box;
	/* #endif */
}

.dil-select__selector-empty,
.dil-select__selector-item {
	/* #ifndef APP-NVUE */
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
	align-items: center;
	cursor: pointer;
	/* #endif */
	line-height: 36px;
	font-size: 14px;
	text-align: center;
	// border-bottom: solid 1px #DDDDDD;
	padding: 0px 5px;
}

.dil-select__selector-item:hover {
	background-color: #f9f9f9;
}

.dil-select__selector-empty:last-child,
.dil-select__selector-item:last-child {
	/* #ifndef APP-NVUE */
	border-bottom: none;
	/* #endif */
}

// picker 弹出层通用的指示小三角
.uni-popper__arrow,
.uni-popper__arrow::after {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
}

.uni-popper__arrow {
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
	top: -6px;
	left: 10%;
	margin-right: 3px;
	border-top-width: 0;
	border-bottom-color: #ebeef5;
}

.uni-popper__arrow::after {
	content: ' ';
	top: 1px;
	margin-left: -6px;
	border-top-width: 0;
	border-bottom-color: #fff;
}

.dil-select__no-border {
	border: none;
}
</style>
